<template>
  <el-dialog :title="title" :visible.sync="visible" @close="$emit('close-dialog')">
    <el-form
      :model="dialogForm"
      :rules="rules"
      :inline="false"
      label-position="right"
      label-width="120px"
      ref="dialogForm">
      <el-form-item label="菜单编号" v-show="false" prop="id">
        <el-input v-model="dialogForm.id"></el-input>
      </el-form-item>
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="dialogForm.name"></el-input>
      </el-form-item>
      <el-form-item label="角色中文名称" prop="nameZh">
        <el-input v-model="dialogForm.nameZh"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close-dialog')">取 消</el-button>
      <el-button type="primary"  @click="operator">确 定</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {postRequest} from "../../../util/api";

    export default {
      name: "OperationRoleDialog",
      props: {
        dialogVisible: {
          type: [Boolean, Number],
          default : () => false
        },
        type: {
          type: String,
          default : () => "addRole"
        },
        form: {
          type: Object,
          default() {
            return {
              id: 0,
              name: '',
              nameZh: ''
            }
          }
        }
      },
      data() {
        return {
          dialogForm: {
            id: 0,
            name: '',
            nameZh: ''
          },
          visible: false,
          rules: {
            name: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
            nameZh: [{required: true, message: '请输入角色中文名称', trigger: 'blur'}]
          }
        }
      },
      computed: {
        title() {
          return this.type === 'addRole' ? '添加角色' : '修改角色';
        }
      },
      methods: {
        operator() {
          if (this.type === "addRole") {
            this.addRole();
          } else if (this.type === "modifyRole") {
            this.modifyRole();
          }
        },
        addRole() {
          this.$refs.dialogForm.validate((valid) => {
            if (valid) {
              postRequest("/system/role/addRole", this.dialogForm).then(resp=> {
                if (resp.status === 200) {
                  this.$emit('close-dialog');
                  this.$emit('query');
                }
              })
            } else {
              return false;
            }
          })
        },
        modifyRole() {
          this.$refs.dialogForm.validate((valid) => {
            if (valid) {
              postRequest("/system/role/modifyRole", this.dialogForm).then(resp=>{
                if (resp.status === 200) {
                  this.$emit('close-dialog');
                  this.$emit('query');
                }
              })
            } else {
              return false;
            }
          })
        },
        resetForm() {
          if (this.type === 'addRole') {
            this.dialogForm = {
              id: 0,
              name: '',
              nameZh: ''
            }
          } else {
            this.dialogForm = JSON.parse(JSON.stringify(this.form));
          }
        },
        reset() {
          if (this.$refs.dialogForm !== undefined) {
            this.$refs.dialogForm.resetFields();
          }
          this.resetForm();
        }
      },
      watch: {
        dialogVisible(newValue, oldValue) {
          this.reset();
          this.visible = newValue;
        },
        type(newValue, oldValue) {
          if (newValue === 'modifyRole') {
            this.dialogForm = JSON.parse(JSON.stringify(this.form));
          }
        },
        form(newValue, oldValue) {
          if (this.type === 'addRole' || newValue === null) {
            return;
          }
          this.dialogForm = JSON.parse(JSON.stringify(newValue));
        }
      }
    }
</script>

<style scoped>

</style>
